{% extends 'IMTDashboardBundle::layout.html.twig' %} {% block main_title
%}Reporting{% endblock %} {% block include_style %}
<link rel="stylesheet"
	href="{{ asset('bundles/imtdashboard/css/fullcalendar-event-colors.css') }}"
	media="screen" />

{% endblock %} {% block include_script %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"
	src="{{ asset('bundles/imtreporting/js/reporting.js') }}"></script>
<script>
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart5);
google.setOnLoadCallback(drawChart2);
google.setOnLoadCallback(drawChart3);
google.setOnLoadCallback(drawChart4);
function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Appel', {{nbCall}}],
      ['Reunion', {{nbTask}}],
      ['Evénement', {{nbEvent}}]
    ]);

    // Set chart options
    var options = {'title':'Repartition par type d\'événement',
                   'width':1000,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}


function drawChart2() {
	  var data = google.visualization.arrayToDataTable([
    ['Type evnt', 'Nombre évenément'],
    ['Evénnement',  {{numberEventPastTime}}],
    ['Appel',  {{numberCallPastTime}}],
    ['Reunion',  {{numberTaskPastTime}}]
  ]);

  var options = {
    title: 'Temps passé en heures',
    hAxis: {title: 'Heures', titleTextStyle: {color: 'red'}},
    'width':800,
    'height':300
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

function drawChart3() {
    var data = google.visualization.arrayToDataTable([
      ['Jour', 'Nombre événement'],
      ['Lun',  {{jourEvent[1]}}],
      ['Mar',  {{jourEvent[2]}}],
      ['Mer',  {{jourEvent[3]}}],
      ['Jeu',  {{jourEvent[4]}}],
      ['Ven',  {{jourEvent[5]}}],
      ['Sam', {{jourEvent[6]}}],
      ['Dim',  {{jourEvent[7]}}]
    ]);

    var options = {
      title: 'Repartition des événements par jour',
      hAxis: {title: 'Nb', titleTextStyle: {color: 'red'}},
      'width':800,
      'height':300
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
    chart.draw(data, options);
  }

function drawChart4() {
    var data = google.visualization.arrayToDataTable([
      ['Jours', 'Nb'],
      {% for key, valueJour in arrayJour %} 
	    ['{{key}}', {{valueJour}}],	
      {% endfor %}
    ]);

    var options = {
      title: 'Nombre événement',
      hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}},
        'width':800,
        'height':300
      };
    

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div4'));
    chart.draw(data, options);
  }
  

function drawChart5() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Participe', {{numberParticipating}}],
      ['Ne participe pas', {{numberCanceled}}],
      ['Ne sais pas', {{numberDontKnow}}],
      ['Invité', {{numberInvited}}]
    ]);

    // Set chart options
    var options = {'title':'Participation',
                   'width':800,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div5'));
    chart.draw(data, options);
  }

	$('#datedebut').datepicker({
	    prevText: "Précedent",
	    nextText: "Suivant",
	    currentText: "Aujourd\'hui",
	    monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aoüt", "Septembre", "Octobre", "Novembre", "Décembre"],
	    monthNamesShort: ["Jan", "Fév", "Mar", "Avr", "Mai", "Jui", "Jui", "Aou", "Sep", "Oct", "Nov", "Dec"],
	    dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
	    dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
	    dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
	    weekHeader: "Wk",
	    dateFormat: "dd/mm/yy"
	});
	
	$('#datefin').datepicker({
	    prevText: "Précedent",
	    nextText: "Suivant",
	    currentText: "Aujourd\'hui",
	    monthNames: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aoüt", "Septembre", "Octobre", "Novembre", "Décembre"],
	    monthNamesShort: ["Jan", "Fév", "Mar", "Avr", "Mai", "Jui", "Jui", "Aou", "Sep", "Oct", "Nov", "Dec"],
	    dayNames: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
	    dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
	    dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
	    weekHeader: "Wk",
	    dateFormat: "dd/mm/yy"
	});
    
</script>
{% endblock %} {% block content %}
<div id="content">
	<div id="">
		<div id="">
			<section id="main" class="clearfix" style="margin: 0px 20px;">
				<div id="main-header" class="page-header">
					<h1 id="main-heading">
						Reporting <span>Le temps est comme l'argent, ne le perdez pas et
							vous en aurez ...</span>
					</h1>
				</div>

				<div class="row-fluid">
					<div class="span12 widget">
						<div class="widget-header">
							<span class="title"><i class="icon-resize-horizontal"></i>
								Affiner mes statistiques</span>
						</div>
						<div class="widget-content form-container">
							<form class="form-horizontal" method="post">

								<div class="control-group">
									<label class="control-label">Comptes</label>
									<div class="controls">
										<label class="checkbox">
											<div class="uniform-checker checkCompte">
												<input type="checkbox" class="uniform" name="imt"
													value="imt" style="opacity: 0;">
											</div> IMT
										</label> <label class="checkbox">
											<div class="uniform-checker checkCompte">
												<input type="checkbox" class="uniform" name="gmail"
													value="gmail" style="opacity: 0;">
											</div> Gmail
										</label>
									</div>
								</div>

								<div class="control-group">
									<label class="control-label dateDebut" for="input01">Date début</label>
									<div class="controls">
										<input id="datedebut" type="text" name="datedebut"
											class="span12 datepicker-week hasDatepicker" value="{{ app.request.get('datedebut') }}" >
									</div>
								</div>

								<div class="control-group">
									<label class="control-label dateFin" for="input01">Date fin</label>
									<div class="controls">
										<input id="datefin" type="text" name="datefin"
											class="span12 datepicker-week hasDatepicker" value="{{ app.request.get('datefin') }} ">
									</div>
								</div>

								<div class="control-group">
									<label class="control-label" for="input19">Type d'événement</label>
									<select id="imt_event_form_general_account" class="selectEvent"
										data-url="{{ path('imt_reporting_homepage') }}"
										name="imt_event_form_general_account" class="valid"><option
											value="">Tous les événements</option>
										<option {% if
											app.request.get("imt_event_form_general_account") ==
											"event"  %} selected="selected" {% endif %}  value="event">Evénement</option>
										<option {% if
											app.request.get("imt_event_form_general_account") ==
											"call"  %} selected="selected" {% endif %} value="call">Appel</option>
										<option {% if
											app.request.get("imt_event_form_general_account") ==
											"meet"  %} selected="selected" {% endif %} value="meet">Réunion</option>
									</select>
								</div>
								<div class="control-group">
									<button class="btn btn-primary" type="submit" value="">Filtrer
										mes résultats</button>
								</div>
							</form>
						</div>
					</div>
				</div>
				<ul class="stats-container">
					<li><a href="#" class="stat summary"> <span
							class="icon icon-calendar-month"> </span> <span class="digit"> <span
								class="text">Nombre d'événements</span> {{numberEvent}}
						</span>
					</a></li>
					<li><a href="#" class="stat summary"> <span class="icon icon-time">

						</span> <span class="digit"> <span class="text">Temps total</span>
								{{ totalTime }} h
						</span>
					</a></li>
					<li><a href="#" class="stat summary"> <span
							class="icon icon-comments "> </span> <span class="digit"> <span
								class="text">Nombre de commentaires</span> 
								{{numberComment}}
						</span>
					</a></li>
					<li><a href="#" class="stat summary"> <span class="icon icon-file ">

						</span> <span class="digit"> <span class="text">Nombre de piéces
									jointes</span> {{user.attachments|length}}
						</span>
					</a></li>
				</ul>
				<div class="row-fluid">
					<div class="widget">
						<div class="widget-header">
							<span class="title">Statistiques générales</span>
							<div class="toolbar">
								<ul class="nav nav-pills">
									<li class="active"><a href="#tab-01" data-toggle="tab">Type
											évenement</a></li>
									<li class=""><a href="#tab-02" data-toggle="tab">Temps passé</a></li>
									<li class=""><a href="#tab-03" data-toggle="tab">Répartition
											par jour</a></li>
									<li class=""><a href="#tab-04" data-toggle="tab">Nombre
											d'événements</a></li>
									<li class=""><a href="#tab-05" data-toggle="tab">Participation</a></li>
								</ul>
							</div>
						</div>
						<div class="tab-content">
							<div class="tab-pane active" id="tab-01">
								<div id="chart_div"></div>
							</div>
							<div class="tab-pane" id="tab-02">
								<div id="chart_div2"></div>
							</div>
							<div class="tab-pane" id="tab-03">
								<div id="chart_div3"></div>
							</div>
							<div class="tab-pane" id="tab-04">
								<div id="chart_div4"></div>
							</div>
							<div class="tab-pane" id="tab-05">
								<div id="chart_div5"></div>
							</div>
						</div>
					</div>
				</div>

				<!-- 
				<div class="row-fluid">
					<div class="widget">
						<div class="widget-header">
							<span class="title">Statistiques evennements</span>
							<div class="toolbar">
								<ul class="nav nav-pills">
									<li class="active"><a href="#tabbis-01" data-toggle="tab">Fichiers</a></li>
									<li class=""><a href="#tabbis-02" data-toggle="tab">Commentaires</a></li>
								</ul>
							</div>
						</div>
						<div class="tab-content">
							<div class="tab-pane active" id="tabbis-01">
								<div id="chart_div6"></div>
							</div>
							<div class="tab-pane" id="tabbis-02">
								<div id="chart_div7"></div>
							</div>
						</div>
					</div>
				</div>
				 -->
		</div>
		</section>
	</div>
</div>
</div>


{% endblock %}
